<template>
  <div class="CustomInfo">
    <div class="chat_info_li clearBoth" v-for="item in dataInfo">
      <el-row>
        <el-col :span="10" class="box chat_info_li_title">
          <span class="ellipsis" :title="item.title">{{item.title}}:</span>
        </el-col>
        <el-col :span="12" class="box chat_info_li_con">
          <span v-if="!item.haveUrl" class="ellipsis" :title="item.value">{{item.value}}</span>
          <a v-if="item.haveUrl" class="ellipsis" :class="checkImg(item.value) ? 'haveImg' : ''" :href="item.value" target="_blank">{{item.value}}</a>
          <span class="tooltip tooltip-div iconfont icon-yulan bigImgBtn"
                v-if="checkImg(item.value)"
                @click.stop="showBigImage(item.value)"></span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import {deepClone} from '@utils/m7Utils.js'
  import {checkform} from '@utils/validate'
  import * as webchatUtils from '@utils/webchat.js'
  import * as types from '@/store/mutation-types.js'

  export default {
    name: 'CustomInfo',
    props: {
      webchatData: Object
    },
    computed: {
      dataInfo () {
        let arr = []
        if (this.webchatData.otherParams && this.webchatData.otherParams.customField) {
          let arrNew = deepClone(this.webchatData.otherParams.customField)
          if (arrNew && typeof arrNew === 'object') {
            for (let a in arrNew) {
              let oldValue = arrNew[a]
              let newValue = webchatUtils.msgConvertion(arrNew[a])
              if (oldValue !== newValue) {
                let obj = {
                  title: a,
                  value: oldValue,
                  haveUrl: true
                }
                arr.push(obj)
              } else {
                arr.push({title: a, value: oldValue, haveUrl: false})
              }
            }
          }
          return arr
        } else {
          return arr
        }
      }
    },
    methods: {
      checkImg (value) {
        if (typeof value !== 'string') {
          return false
        }
        value.replace(/\s/g, '')
        if (checkform(value, 'Img')) {
          return false
        } else {
          return true
        }
      },
      showBigImage (data) {
        let msg = {
          show: true,
          url: data
        }
        this.$store.commit(types.SET_OLD_BIGIMG, msg)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .chat_info_li
    color $cf-gray3
    padding 0 10px 0 0
  .chat_info_li_con
    text-align right
    margin-left 7%
  .ellipsis
    overflow hidden
    max-width 100%
    display inline-block
  .ellipsis.haveImg
    width calc(100% - 22px)
  .bigImgBtn
    cursor pointer
    margin-right 2px
    color $c-main
</style>
